<template>
  <div class="center-account">
    <ul class="nav">
      <li
        v-for="(item, index) in list"
        :key="index"
        @click="clickItem(item.url)"
      >
        <ol>
<!--          <li class="num">{{ +item.total.toFixed(2) }}</li>-->
          <li class="num">{{ +item.total }}</li>
          <li class="text">{{ item.text }}</li>
        </ol>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'CenterAccount',
  props: ['list'],
  methods: {
    clickItem(url) {
      if (url.length > 1) {
        if (url === 'order') {
          this.$router.push('/service/order/0')
        } else if (url === 'team') {
          this.$router.push('/service/team/0')
        } else {
          this.$router.push(`/account/${url}`)
        }
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.center-account
  margin -90px 10px 10px 10px
  background white
  border-top-left-radius 5px
  border-top-right-radius 5px
  padding 15px 10px
  height 60px
  .nav
    display flex
    & > li
      flex 1
      //border-right 1px solid $background_color
      &:last-child
        border none
      ol > li
        height 30px
        line-height 30px
        &.num
          font-weight 700
          line-height 45px
          font-size 18px
          color $second_color
        &.text
          letter-spacing 1px
          font-size 14px
</style>
